import {useState, useEffect} from 'react';

export default function Demo7() {
    const [to, setTo] = useState('FELIKS')
    const [message, setMessage] = useState('Hello')

    const handleSubmit = (event) => {
        event.preventDefault()
        setTimeout(() => {
            alert(`Sending message to ${to}: ${message}`)
        }, 5000)
    }
    const handleMessageChange = (event) => {
        setMessage(event.target.value)
        console.log(event.target.value)
    }

    // 监视to的变化
    /*useEffect(() => {
        alert(`Sending message to ${to}: ${message}`)
    }, [to])*/

    const formStyle = {
        width: '50%',
        height: '200px',
        margin: 'auto',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-around',
    }

    return (
        <section>
            <h2>作为快照的状态</h2>
            <form style={formStyle} onSubmit={handleSubmit}>
                <label>
                    To:{''}
                    <select value={to} onChange={e => {
                        setTo(e.target.value)
                    }}>
                        <option value="FELIKS">FELIKS</option>
                        <option value="JULIA">JULIA</option>
                        <option value="MOM">MOM</option>
                        <option value="DAD">DAD</option>
                    </select>
                </label>
                <textarea value={message} onChange={handleMessageChange}/>
                <button type="submit">Send</button>
            </form>
        </section>
    )
}
